{% extends "osr-style/pages/based/based.html" %}
{% block title %}{{_('写点什么')}}-{% endblock %}
{% block content %}
<data id="post_id" content="{{data.id}}"></data>
<data id="status" content="{{data.status}}"></data>
<div class="row osr-edit-page">
    <section class="osr-panel">
        <div id="app">
            <div class="form-inline">
                <div class="pull-left input-group">
                    <select id="category" class="form-control osr-form-control" name="category" v-model="category">
                      <option v-if="!category" :value="category" selected>{{_('默认文集')}} </option>
                      <option v-if="category===cg._id" v-for="cg in categorys" v-bind:value =cg._id selected>{[cg.name]} </option>
                      <option v-if="category!==cg._id" v-for="cg in categorys" v-bind:value =cg._id>{[cg.name]} </option>
                      <option v-if="category" >{{_('默认文集')}} </option>
                    </select>
                    <a class="btn osr-btn-link" href="/content/category?type=post&ps={{data.status}}&peditor={{data.editor}}&pid={{data.id}}">
                      <i class="fa fa-cog"></i>
                    </a>
                </div>
                <div class="pull-right input-group">
                    <div class="btn-group-md">
                        <button onclick="save(0)" v-model="save_name" class="btn osr-btn btn-info osr-submit-btn">
                            <i class="fa fa-save"></i> {{_('存为草稿')}}
                        </button>
                        <button onclick="save('issue')" id="confirm" class="btn osr-btn btn-success osr-submit-btn" type="button" >
                            {[issue_name]}
                        </button>
                    </div>
                </div>
            </div>
            <br><br>

            <div class="form-group">
              <input name="title" type="text" class="form-control osr-input" v-model="title"
                     placeholder="{{_('取个好标题吧')}}"
                     data-bv-notempty-message="{{_('标题不能为空')}}" required/>
            </div>


            <!-- tags 模拟框-->
             <div class="modal fade" id="tags" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title">{{_('添加标签')}}</h4>
                        </div>
                        <div class="modal-body">
                            <input type="text" class="form-control osr-input" v-model="tag" placeholder="{{_('可以在这里添加标签哦')}}" maxlength="10">
                            <br>
                            <div class="btn-group">
                                <button onclick="add_tag()" class="btn-sm btn osr-btn btn-info">
                                    {{_('添加')}}
                                </button>
                            </div>
                            <br>

                            <span v-for="t in tags" class="osr-tags">
                                <span class="label label-default">
                                     {[t]}
                                     <a v-on:click="del_tag(t)" class="osr-color-danger">
                                         <i class="fa fa-close"></i>
                                     </a>
                                </span>
                                &nbsp;
                            </span>

                        </div>
                        <div class="modal-footer">
                            <button class="btn osr-btn btn-info" type="button" data-dismiss="modal" aria-hidden="true">
                                {{_("完成")}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!--模态框-->
        </div>
        {% if data.editor == "markdown" %}
            {% include 'osr-style/pages/module/editor/markdown.html' %}
        {% elif data.editor == "rich_text" %}
            {% include 'osr-style/pages/module/editor/richtext_atc_edit.html' %}
        {% elif current_user.editor == "rich_text" %}
            {% include 'osr-style/pages/module/editor/richtext_atc_edit.html' %}
        {% else %}
            {% include 'osr-style/pages/module/editor/markdown.html' %}
        {% endif %}
        <br>
        <div id="app-2" style="width:100%">
            <button type="button" class="btn-sm btn osr-btn btn-success" data-toggle="modal" data-target="#tags">
               <i class="fa fa-tag"></i> {{_("添加标签")}}
            </button>
            <br>
            <span v-for="t in tags">
                <span class="label label-default osr-tags">
                     {[t]}
                     <a v-on:click="del_tag(t)" class="osr-color-danger">
                         <i class="fa fa-close"></i>
                     </a>
                </span>
                &nbsp;
            </span>
        </div>

    </section>
</div>

<script src="/theme/static/js/markdown/marked.min.js?v={{g.site_global.site_config.STATIC_FILE_VERSION}}"></script>
<link href="/theme/static/css/highlight-style-github.css?v={{g.site_global.site_config.STATIC_FILE_VERSION}}" rel="stylesheet">
<script src="/theme/static/js/highlight.js?v={{g.site_global.site_config.STATIC_FILE_VERSION}}"></script>

<script>

    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
            title:"",
            post:null,
            issue_name:"{{_('发布')}}",
            save_name:"{{_('保存')}}",
            tag:"",
            categorys:{},
            category:"",
            tags:[],
            editor_name:"markdown",
            customize_key:null
            }
    })

    var vue2 = new Vue({
      el: '#app-2',
      delimiters:['{[', ']}'],
      data:{
            tags:[]
            }
    })

    // 加载完页面执行
    $(document).ready(function(){

        {% if data.editor %}
            vue.editor_name = "{{data.editor}}";
        {% else %}
            vue.editor_name = "{{current_user.editor}}";
        {% endif %}
        get_post();
        get_categorys();
    })

    function get_post(){

        var url_s = get_url_parameter();
        var post_id = get_obj_value(url_s, "id");
        var status = get_obj_value(url_s, "status")
        if (post_id){
            var status=status;

            d = {
                post_id:post_id,
                status:status
            }

             var result = osrHttp("GET","/api/post", d, args={not_prompt:true});
             result.then(function (r) {
                vue.post = r.data.post;
                vue.title = vue.post.title;
                vue.tags = vue.post.tags;
                vue2.tags = vue.tags;
                vue.category = vue.post.category;

                if(vue.editor_name != vue.post.editor){
                    alert("{{_('抱歉!检查到文本编辑器类型错误(editor),请关闭页面重新打开')}}!.");
                }else if(vue.editor_name == "markdown"){
                    simplemde.value(vue.post.content);
                }else if(vue.editor_name == "rich_text"){
                    editor.txt.html(vue.post.content);
                }
                if (r.data.post.issued){
                    vue.issue_name = "{{_('更新发布')}}";
                    vue.save_name = "{{_('存为草稿')}}";
                }else{
                    vue.save_name = "{{_('更新草稿')}}";
                }
             });
        }

    }

    function get_categorys(){
         var result = osrHttp("GET","/api/content/category", {type:"post", action:"get_category"},
                                args={not_prompt:true});
         result.then(function (r) {
            vue.categorys = r.data.categorys;
         });
    }

    function add_tag(){
        if (vue.tag ){
            if (!vue.tags){
                vue.tags = [];

            }
            vue.tags.push(vue.tag);
            vue.tag = "";
        }
        vue2.tags = vue.tags;
    }

    function del_tag(v){
        if (vue.tags){
            vue.tags.splice($.inArray(v, vue.tags),1);
        }
        vue2.tags = vue.tags;
    }

    //当点击提交按钮,提交用于填入的数据到api
    function save(issue_way){

        formValidate();
        if(vue.editor_name == "markdown"){
            var content = simplemde.value();
            var conetent_text = simplemde.value();

        }else if(vue.editor_name == "rich_text"){
            var content = editor.txt.html();
            var conetent_text = editor.txt.text();
        }
        if (vue.post && vue.post._id){
            post_id = vue.post._id;
        }else{
            post_id = null;
        }
        var d = {
                 content_text:conetent_text,
                 content:content,
                 editor:vue.editor_name,
                 title:vue.title,
                 category:vue.category,
                 tags:JSON.stringify(vue.tags),
                 issue_way:issue_way,
                 id:post_id
        }
        // 提交数据
         var result = osrHttp("POST", "/api/user/post", d);
        result.then(function (r) {
            //销毁提示事件
            window.onbeforeunload = null;
            if(issue_way){
                location.href = "/user";
            }else{
                location.href = "/user?s=draft";
            }
        });

    }

    window.onbeforeunload=function(){
         return "{{_('确认已保存内容后才离开哦')}}";
    }

</script>
{% endblock %}